<template>
  <div id="errorTestList">
    <Head />
    <div class="main-box">
      <div class="header">
        <h3 class="title" style='margin:0'>错题列表</h3>
        <el-breadcrumb class="other">
          <el-breadcrumb-item :to="{ path: '/studyCenter' }">学习中心</el-breadcrumb-item>
          <el-breadcrumb-item>错题列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content">
        <el-table class="list-table" :data="tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="试卷名称">
            <template slot-scope="scope">
              <!-- <span class="scope-icon">精选</span> -->
              <span style="margin-left: 10px;text-align:center;" >{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="总题数" width="120">
            <template slot-scope="scope">
              <div style="text-align:center;">{{ scope.row.totalQuestionNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="错题数" width="120">
            <template slot-scope="scope">
              <div style="text-align:center;">{{ scope.row.totalQuestionNumber - scope.row.passedQuestionNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="accuracy" label="正确率" width="120">
            <template slot-scope="scope">
              <div style="text-align:center;">{{ (scope.row.passedQuestionNumber / scope.row.totalQuestionNumber).toFixed(2) * 100 }}%</div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="答题时间" width="180">
            <template slot-scope="scope">
              <div style="text-align:center;">{{ scope.row.time }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="答题时长" width="120">
            <template slot-scope="scope">
              <div style="text-align:center;">{{ (scope.row.duration / 60).toFixed(2) }} 分钟</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleChapterItemClick(scope.row)"
                type="text"
                size="small"
                class="operateBtn"
              >进入考试</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div class="content-footer">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
          ></el-pagination>
          <div class="recordSum">共{{total}}条记录</div>
        </div> -->
      </div>
    </div>
    <Foot />
  </div>
</template>

<script>
import Head from "../../components/common/header";
import Foot from "../../components/common/footer";
import {getErrorTestList} from '../../api/errorTest'
export default {
  data() {
    return {
        currentPage: 1, //当先页
        pageSize: 8, //一次几条
        total: 20, //总共条数
        tableData: [
            //表数据
        ]
    };
  },
  components: {
    Head,
    Foot
  },
  methods:{
      handleCurrentChange(){},
      handleChapterItemClick(row){
        let routerUrl = this.$router.resolve({
            path:'/chapter',query:{page:'error',paperId:row.paperId,paperRecordId:row.paperRecordId}
        })
        window.open(routerUrl.href, '_blank');
      }
  },
  mounted(){
    let categoryId = localStorage.getItem('categoryId');
    getErrorTestList({subjectId:categoryId,onlyShowWrong:true})
    .then(res=>{
      if(res.code == 200){
        this.tableData = res.data
      }
    })
  }
};
</script>


<style lang="scss">
.el-table th{
  background: #f1f1f1;
}
#errorTestList {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 40px);
  background-image: url();
  .main-box {    //列表盒子
    flex:1;
    min-height: calc(100vh - 305px);
    .content {
      //列表内容
      .list-table {
        .scope-icon {
          padding: 2px 8px;
          background-color: #f37b1d;
          border-radius: 2px;
          color: #fff;
          font-size: 10px;
          font-weight: bold;
        }
      }
      .operateBtn {
        padding: 8px 12px;
        color: #fff;
        background-color: #3bb4f2;
        border-color: #3bb4f2;
        border-radius: 14px;
      }
      .list-table {
        .has-gutter tr th {
          background: #f9f9f9;
          border-top: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
          .cell {
            color: #333;
            text-align: center;
          }
        }
      }
      .content-footer {//分页
        margin-top:12px;
        .recordSum {
          color: #999;
          font-size: 14px;
        }
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    width: 1210px;
    margin: 30px auto;
    padding: 10px 20px;
    background: white;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
    .header {
      //列表头部
      padding-top: 26px;
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      position: relative;
      .button{
        position: absolute;
        right:0;
      }
      .title {
        font-weight: 600;
        font-size: 20px;
      }
      .other {
        margin: 8px 0 0 20px;
        .el-breadcrumb__item:last-child .el-breadcrumb__inner,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
          color: #0e90d2;
        }
        .is-link {
          color: #0e90d2;
        }
      }
    }
  }
}
// 修改element 样式
.el-pager li.active {
  background-color: #409eff;
  cursor: default;
  color: white !important;
}
.el-pager li {
  border: 1px solid #ccc;
  margin-right: 5px !important;
}
.el-pager li.active + li {
  border: 1px solid #ccc !important;
}
</style>